import { Component, OnInit } from '@angular/core';
import G6 from '@antv/g6';
import { SIMPLE_NODE_DATA } from './simple-node-data';

@Component({
  selector: 'zepride-simple',
  templateUrl: './simple.component.html',
  styleUrls: ['./simple.component.less']
})
export class SimpleComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    this.draw();
  }
  /**
   * 构建图表
   */
  generateGraph() {
    const graph = new G6.Graph({
      container: 'container',
      width: 1000,
      height: 800,
      layout: {
        type: 'dagre',
        nodesep: 100, // 节点之间的间距
        ranksep: 30, // 层间距
        controlPoints: true,
      },
      defaultNode: { // 节点的类型，这里使用注册的节点 custom
        type: 'custom',
      },
      defaultEdge: { // 边（节点连线）的样式
        type: 'polyline',
        style: {
          radius: 20,
          offset: 45,
          endArrow: true,
          lineWidth: 2,
          stroke: '#C2C8D5',
        },
      },
      nodeStateStyles: { // 节点选中样式
        selected: {
          stroke: '#d9d9d9',
          fill: '#5394ef',
        },
      },
      modes: {
        default: [
          'drag-canvas', // canvas可拖动
          'zoom-canvas', // canvas可缩放
          'click-select', // 节点可以单击选中
          {
            type: 'create-edge',
            trigger: 'drag'
          }
        ],
      },
      fitView: true,
    });
    return graph;
  }

  /**
   * 自定义节点
   */
  registerNode() {
    G6.registerNode(
      'custom',
      {
        drawShape(cfg, group) {
          const rect = group.addShape('rect', {
            attrs: {
              x: -75,
              y: -25,
              width: 150,
              height: 50,
              radius: 10,
              stroke: '#5B8FF9',
              fill: '#C6E5FF',
              lineWidth: 3,
            },
            name: 'rect-shape',
          });
          if (cfg.name) {
            group.addShape('text', {
              attrs: {
                text: cfg.name,
                x: 0,
                y: 0,
                fill: '#00287E',
                fontSize: 14,
                textAlign: 'center',
                textBaseline: 'middle',
                fontWeight: 'bold',
              },
              name: 'text-shape',
            });
          }
          return rect;
        },
      },
      'single-node',
    );
  }

  draw() {
    const graph = this.generateGraph();
    this.registerNode();
    graph.data(SIMPLE_NODE_DATA);
    graph.render();
  }

}
